<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>show chart</title>
<!-- 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
		<script type="text/javascript" src="<%=basePath%>/js/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		
		
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'top sales 10'
            },
            subtitle: {
                text: '${selectaddress} top sales 10'
            },
            xAxis: {
                categories: [
                    '1',
                    '2',
                    '3',
                    '4',
                    '5',
                    '6',
                    '7',
                    '8',
                    '9',
                    '10'
                ]
            },
            yAxis: {
                //min: 0,
                title: {
                    text: '利润（元）'
                }
            },
            credits: {
                enabled: true
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{point.key}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'test001',
                data: [
                       ['First', 29.9],
                       ['Second', 71.5],
                       ['Third', -106.4],
                       ['fourth', 60.4],
                       ['fiyth', -16.4],
                       ['sexth', 12.4],
                       ['eight', 6.4],
                       ['nine', -10.4],
                       ['ten', 26.4]
                   ]
            },{
                name: 'test02',
                data:[
                      ['t1', 29.9],
                      ['t2', 71.5],
                      ['t3', -106.4],
                      ['t4', 60.4],
                      ['t5', -16.4],
                      ['t6', 12.4],
                      ['t7', 6.4],
                      ['t8', -10.4],
                      ['t9', 26.4]
                  ]
            }]
        });
    });
    
    function submitForm(){
    	$("#query").submit();
    }
		</script>
	</head>
	<body>
<script src="<%=basePath%>/js/highcharts.js"></script>
<script src="<%=basePath%>/js/modules/exporting.js"></script>
	<div>
<%--		<form id="query" action="<%=basePath%>/show/showChart.do" method="post">--%>
<%--			<select name="address" onchange="submitForm();">--%>
<%--				<c:forEach var="address" items="${addresslist}" varStatus="index">--%>
<%--					<option value="${address['address']}" <c:if test="${address['address'] eq selectaddress}">selected="selected"</c:if> >${address['address']}</option> --%>
<%--				</c:forEach>--%>
<%--			</select>--%>
<%--			TOP SALES 10--%>
<%--		</form>--%>
	</div>
	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

